<template>
	<div class="ml-register-active">
		<div class="ml-bg-extension-006"></div>
		<p v-on:click="download" class="ml-icon-register-006" ></p>
		<div class="input-box">
			<p><input class="user-input" v-model="tel" type="number" placeholder="请输入手机号"/></p>
			<p>
				<input class="code-input img-input" v-model="imgCode" type="text" placeholder="请输入"/>
				<img v-on:click="getImg" :src="imgSrc" alt="" />
			</p>
			<p>
				<input class="code-input" v-model="code" type="number" placeholder="请输入验证码"/>
				<span v-on:click="getMsg($event)">{{msg}}&nbsp;{{msgS}}</span>
			</p>
		</div>
		<ul class="ag-ul">
			<li v-on:click="clickBox(confirm)" :class="{'ml-icon-register-001':confirm,'ml-icon-register-002':!confirm}"></li>
			<li>已阅读并同意</li>
			<router-link tag="li" :to="{name:'protocolUser'}">《盈鱼理财用户协议》</router-link>
		</ul>
		<div class="reg-btn" v-on:click="register">立即注册领福利</div>
		<ul class="adv-ul">
			<li >
				<div class="ml-icon-register-003"></div>
				<p class="title">安全保障</p>
				<p class="content">国企控股 银行存管<br />专业多级风控审核</p>
			</li>
			<li >
				<div class="ml-icon-register-005"></div>
				<p class="title">优质项目</p>
				<p class="content">低门槛  100元起购  <br />高收益每日看得见</p>
			</li>
			<li>
				<div class="ml-icon-register-004"></div>
				<p class="title">福利不断</p>
				<p class="content">邀请好友拿奖励<br />投资理财赢大奖</p>
			</li>
		</ul>
		<p class="bottom1">Copyright© 2017-2057 浙江康宏投资管理有限公司 </p>
		<p class="bottom3">浙ICP备18001503号-1</p>
		<p class="bottom2">
			<span>浙江康宏投资管理有限公司</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>市场有风险  理财需谨慎</span>
		</p>
		<div class="msg" v-show="showMsg" style="text-align:center;position:fixed;z-index: 999999999;width: 100%;"><div style="padding: 10px; border-radius: 4px;color:#fff; background:#5F6161; display:inline-block; " class="ml-message">{{alertMsg}}</div></div>
	</div>
</template>

<script>
import md5 from "../../config/md5.js"
import request from "../../config/request.js"
import judgeSystem from "../../config/judgeSystem.js"
export default {
	data() {
		return {
			tel:'',
			code:'',
			num:'',
			confirm:true,
			msg:'获取验证码',
			msgS:null,
			alertMsg:null,
			showMsg:false,
			system:null,
			channel:null,
			downloadUrl:null,
			imgSrc:null,
			imgCode:''
		}
	},
	created() {
        (function(root) {
            root._tt_config = true;
            //
            var ta = document.createElement('script'); ta.type = 'text/javascript'; ta.async = true;
            ta.src = document.location.protocol + '//' + 's1.pstatp.com/bytecom/resource/track_log/src/toutiao-track-log.js';
            ta.onerror = function () {
                var request = new XMLHttpRequest();
                var web_url = window.encodeURIComponent(window.location.href);
                var js_url  = ta.src;
                var url = '//ad.toutiao.com/link_monitor/cdn_failed?web_url=' + web_url + '&js_url=' + js_url + '&convert_id=93384419857';
                request.open('GET', url, true);
                request.send(null);
            }
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ta, s);
            //今日头条ff
            var ta1 = document.createElement('script'); ta.type = 'text/javascript'; ta.async = true;
            ta1.src = document.location.protocol + '//' + 's1.pstatp.com/bytecom/resource/track_log/src/toutiao-track-log.js';
            ta1.onerror = function () {
                var request = new XMLHttpRequest();
                var web_url = window.encodeURIComponent(window.location.href);
                var js_url  = ta.src;
                var url = '//ad.toutiao.com/link_monitor/cdn_failed?web_url=' + web_url + '&js_url=' + js_url + '&convert_id=93645955728';
                request.open('GET', url, true);
                request.send(null);
            }
            var s1 = document.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(ta1, s1);
            //硬核
            var ta2 = document.createElement('script'); ta2.type = 'text/javascript'; ta2.async = true;
            ta2.src = document.location.protocol + '//' + 's1.pstatp.com/bytecom/resource/track_log/src/toutiao-track-log.js';
            ta2.onerror = function () {
                var request = new XMLHttpRequest();
                var web_url = window.encodeURIComponent(window.location.href);
                var js_url  = ta2.src;
                var url = '//ad.toutiao.com/link_monitor/cdn_failed?web_url=' + web_url + '&js_url=' + js_url + '&convert_id=93645923479';
                request.open('GET', url, true);
                request.send(null);
            }
            var s2 = document.getElementsByTagName('script')[0]; s2.parentNode.insertBefore(ta2, s2);
        })(window);
	},
	mounted(){
		var h = window.innerHeight;
		this.$(".ml-register-active .msg").css("bottom",h*0.2);
		var detect = judgeSystem.detect(navigator.userAgent);
		var self = this;
		self.getImg();
		if(detect.os.ios){
			self.system = 'ios';
			self.channel = self.$route.params.channel;
		}else{
			self.system = 'android';
			self.channel = self.$route.params.channel;
		}
		self.$.ajax({ 
			url:'/fish-backend/apis/app/getDownloadPath',   //提交的url
			type:'GET',
			beforeSend:function(xhr){		  	        		
				xhr.setRequestHeader('appidentifier',self.system);	
				xhr.setRequestHeader('source','web');
				xhr.setRequestHeader('channel',self.channel);	
		    },
		    success:function(res){
				self.$data.downloadUrl = res.data.downloadPath;
			}
		});	
	},
	methods: {
		download(){	
			var self=this;
			location.href = this.$data.downloadUrl;
		},
		clickBox(confirm){
			var self=this;
			this.confirm=!confirm;
		},
		getImg(){
			var self=this;
			self.imgSrc="/fish-backend/apis/ope/captcha.jpg?date="+new Date().valueOf();
		},
		register(event){
			var self=this;
			if(self.tel.length!=11){
				self.$data.showMsg=true;
				self.$data.alertMsg='请输入正确的手机号';
				setTimeout(function(){
					self.$data.showMsg=false;
				},2000);
				return;
			}
			if(!self.confirm){
				self.$data.showMsg=true;
				self.$data.alertMsg='请阅读并同意用户协议';
				setTimeout(function(){
					self.$data.showMsg=false;
				},2000);
			}else{
			var _date=new Date().getTime();
			var sign = "_date="+_date+"&code="+self.$data.code+"&phone="+self.$data.tel+"&op123$#@!0987&*(";
			sign = md5.md5(sign).toLocaleLowerCase();
			self.$.ajax({
				url:'/fish-backend/apis/ope/simpleRegister',
				type:'POST',
				beforeSend:function(xhr){		 
					xhr.setRequestHeader('appidentifier',self.system);
					xhr.setRequestHeader('source','web');
					xhr.setRequestHeader('channel',self.channel);
				},
				data:{	
					'_date':_date,
					'code':self.code,
					'phone':self.tel,			 	
					'sign':sign
				},
				success:function(data){
					self.$data.showMsg=true;
					self.$data.alertMsg=data.msg;
					if(data.code==0){
						self.$data.alertMsg="注册成功，2秒后跳转到app下载页";
						_taq.push({convert_id:"93384419857", event_type:"form"});
						_taq.push({convert_id:"93645955728", event_type:"form"});
						if(self.channel.match("yinghetoutiao") || self.channel.match("fenghuang")){
							_taq.push({convert_id:"93645923479", event_type:"form"});
						}						
					}
					setTimeout(function(){
						self.$data.showMsg=false;
						if(data.code==0){
							self.$router.push({ name: 'transferExtension2', params: { channel: 'yingyu686',noReg:1} });
						}
					},2000);
				}
			});}	
		},
		getMsg(event){
			var self=this;
			if(self.tel.length!=11){
				self.$data.showMsg=true;
				self.$data.alertMsg='请输入正确的手机号';
				setTimeout(function(){
					self.$data.showMsg=false;
				},2000);
				return;
			}
			if(self.imgCode==""){
				self.$data.showMsg=true;
				self.$data.alertMsg="请输入图形验证码";
				setTimeout(function(){
					self.$data.showMsg=false;
				},2000);				
				return;
			}
			request.getCheckUser({'phone':self.tel},function(res){
				if(!res.data){
					var _date=new Date().getTime();
					var sign = "_date="+_date+"&imgCode="+self.$data.imgCode+"&phone="+self.$data.tel+"&op123$#@!0987&*(";
					sign = md5.md5(sign).toLocaleLowerCase();
					var param={	
						'_date':_date,
						'imgCode':self.imgCode,
						'phone':self.tel,			 	
						'sign':sign
					}
//					request.getPhoneMsg(param,function(data){
//						self.$data.msg=60;
//						console.log(self.$(event.target).css("pointer-events"));
//						self.$(event.target).css("pointer-events",'none');
//						var timer = setInterval(function(){
//							self.$data.msg--;
//							if(self.$data.msg==0){
//								clearInterval(timer);
//								self.$data.msg="获取验证码";
//								self.$(event.target).css("pointer-events",'auto');
//							}
//						},1000);
//					});
					self.$.ajax({
						url:'/fish-backend/apis/ope/sms/send',
						type:'POST',
						beforeSend:function(xhr){		 
							xhr.setRequestHeader('appidentifier','ios');
							xhr.setRequestHeader('source','web');
							xhr.setRequestHeader('channel','yingyu686');
						 },
						 data:{	
							'_date':_date,
							'imgCode':self.imgCode,
							'phone':self.tel,			 	
							'sign':sign
						 },
						 success:function(data){
						 	if(data.msg!="请求成功"){
						 		self.$data.showMsg=true;
						 		self.$data.alertMsg=data.msg;
						 		if(data.code==20011){
						 			self.getImg();
						 		}
						 		setTimeout(function(){
							 		self.$data.showMsg=false;
							 	},2000);
						 	}else{
								self.$data.msg=60;
								self.$data.msgS="S";
								self.$(event.target).css("pointer-events",'none');
								var timer = setInterval(function(){
									self.$data.msg--;
									if(self.$data.msg==0){
										clearInterval(timer);
										self.$data.msg="获取验证码";
										self.$(event.target).css("pointer-events",'auto');
									}
									if(self.$data.msg!="获取验证码"){
										self.$data.msgS="S";
									}else{
										self.$data.msgS="";
									}
								},1000);						 		
						 	}
						 }
					});
				}else{
					self.$data.showMsg=true;
					self.$data.alertMsg="该手机号已被注册";
					setTimeout(function(){
						self.$data.showMsg=false;
					},2000);
				}
			});
		}
	}
}	
</script>

<style lang="scss">
.ml-register-active{
	position:relative;
	overflow-y: auto;
	background: #E5F5F2;
	.ml-bg-extension-006{
		height:550px;
	}
	.ml-icon-register-006{
		position:fixed;
		right:0;
		top:200px;
		color:#f3381d;
		font-size:30px;
		font-family: PingFangSC-Regular;
		padding:40px 0 0 23px;
		line-height:35px;
	}
	.input-box{
		padding:20px 0 10px;
		p{
			width:90%;
			border-radius: 16px;
			margin:30px auto;
			overflow: hidden;
			background:#fff;
			height:90px;
			input{
				border:none;
				padding:0 30px;
				//height:90px;
				box-sizing: border-box;
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #666666;
				letter-spacing: 4px;
				border:0;
				background: transparent;
				height:100%;
			}
			.user-input{					
				background: #FFFFFF;

				width:100%;
				margin:0 auto;				
			}
			.code-input{
				width:65%;
				background: #FFFFFF;				
				margin:0 auto;
			}
			.img-input{
				position:relative;
				top:-20px;
			}
			span{
				display: inline-block;
				border-left:1px solid #4C81FE;
				font-family: PingFang-SC-Regular;
				font-size: 34px;
				color: #4C81FE;
				letter-spacing: -0.82px;
				box-sizing: border-box;
				padding:10px 0 10px 0px;
				position: relative;
				top:5px;
				width:32%;
				margin:0 auto;
				text-align: center;
			}
			img{
				width:32%;
				height:70px;
				position: relative;
				top:10px;
			}
			input:focus{
				 outline: none;
			}	
			input::-webkit-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;
	        }
	        input::-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
	        input:-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
	        input:-ms-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
		}	
	}
	.ag-ul{
		overflow: hidden;
		text-align: center;
		margin:0 auto;
		li{
			float:left;
			font-family: PingFangSC-Regular;
			letter-spacing: 0;
			font-size: 26px;
			margin-top:10px;
		}
		li:first-child{
			margin-top:5px;
			margin-left:16%;
		}
		li:nth-child(2){
			color: #C8C8C8;	
			margin-left:10px;		
		}
		li:last-child{
			color: #3D76FF;
			margin-left:5px;
			
		}
	}
	.reg-btn{
		font-family: PingFangSC-Regular;
		font-size: 32px;
		color: #FFFFFF;
		letter-spacing: 1.4px;
		background-image: linear-gradient(-90deg, #FF3642 0%, #FF666F 100%);
		border-radius: 8px;
		height:80px;
		line-height:80px;
		width:85%;
		margin:50px auto 60px;
		text-align: center;
	}
	.adv-ul{
		overflow: hidden;
		li:first-child{
			width:36%;
		}
		li:nth-child(2){
			width:34%;
		}
		li:last-child{
			width:30%;
		}
		li{
			float:left;
			p.title{
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #FF666F;
				letter-spacing: -1.17px;
				text-align: center;
				padding:20px 0 15px;
			}
			p.content{
				font-family: PingFang-SC-Regular;
				font-size: 20px;
				color: #11603F;
				letter-spacing: -0.78px;
				text-align: center;
				line-height: 40px;
			}
		}
	}
	.bottom1{
		font-family: PingFangSC-Light;
		font-size: 20px;
		color: #959595;
		letter-spacing: 0;
		text-align: center;
		width:100%;
		padding:10px 0 5px;
		margin-top:50px;
	}
	.bottom3{
		font-family: PingFangSC-Light;
		font-size: 20px;
		color: #959595;
		letter-spacing: 0;
		text-align: center;
		width:100%;
		padding:5px 0 0;
		margin-bottom:5px;
	}
	.bottom2{
		background: #FF666F;
		text-align: center;
		width:100%;
		padding:15px 0;
		span:first-child{
			font-family: PingFang-SC-Regular;
			font-size: 24px;
			color: #FFFFFF;
			letter-spacing: 0;
		}
		span:last-child{
			opacity: 0.8;
			font-family: PingFang-SC-Light;
			font-size: 20px;
			color: #FFFFFF;
		}
	}
}	
</style>